<template>
  <div class="vip">
    <!-- 头部 -->
    <div class="bg">
      <div class="top">
        <img src="@/assets/images/VIP/矩形1@2x.png" alt="" @click="goback" />
        <span>樊登讲书VIP</span>
        <p></p>
      </div>
      <div class="msg">
        <div class="me">
          <div class="profile-photo"></div>
          <div class="username">
            <p class="name">
              莉雅kk
              <!-- <img src="@/assets/images/VIP/组2@2x.png" alt="" /> -->
            </p>
            <p>
              体验期已过期<img src="@/assets/images/VIP/矩形3@2x.png" alt="" />
            </p>
          </div>
        </div>
        <div class="bottom">
          <div class="left">
            <span>￥</span>
            <span>365</span>
            <span>每天仅需1.00元</span>
          </div>
          <div class="right">立即开通</div>
        </div>
      </div>
    </div>
    <div class="tabsTitle">
      <div class="dot">
        <div class="op25">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op50">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op75">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op100">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
      </div>
      <div class="title">尊享10权益</div>
      <div class="dot dot2">
        <div class="op25">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op50">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op75">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op100">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
      </div>
    </div>
    <!-- 会员权益 -->
    <div class="equities">
      <div class="list">
        <div class="list-t">
          <div class="circle"></div>
          <div class="emphasize">基础权益</div>
          <span class="line"></span>
          <span>樊登讲书VIP</span>
          <span>4大权益</span>
        </div>
        <div class="list-c">
          <div class="list-c-c">
            <img src="@/assets/images/VIP/图标@2x.png" alt="" />
            <span>300+书</span>
            <p>畅听下载</p>
          </div>
          <div class="list-c-c">
            <img src="@/assets/images/VIP/图标@2x(1).png" alt="" />
            <span>思维导图</span>
            <p>免费学习</p>
          </div>
          <div class="list-c-c">
            <img src="@/assets/images/VIP/图标@2x(2).png" alt="" />
            <span>VIP礼品卡</span>
            <p>亲友同享</p>
          </div>
          <div class="list-c-c">
            <img src="@/assets/images/VIP/图标@2x(3).png" alt="" />
            <span>主题书单</span>
            <p>轻松选书</p>
          </div>
        </div>
      </div>
      <div class="list">
        <div class="list-t">
          <div class="circle"></div>
          <div class="emphasize">基础权益</div>
          <span class="line"></span>
          <span>樊登讲书VIP</span>
          <span>4大权益</span>
        </div>
        <div class="list-c">
          <div class="list-c-c">
            <img src="@/assets/images/VIP/图标@2x.png" alt="" />
            <span>300+书</span>
            <p>畅听下载</p>
          </div>
          <div class="list-c-c">
            <img src="@/assets/images/VIP/图标@2x(1).png" alt="" />
            <span>思维导图</span>
            <p>免费学习</p>
          </div>
          <div class="list-c-c">
            <img src="@/assets/images/VIP/图标@2x(2).png" alt="" />
            <span>VIP礼品卡</span>
            <p>亲友同享</p>
          </div>
          <div class="list-c-c">
            <img src="@/assets/images/VIP/图标@2x(3).png" alt="" />
            <span>主题书单</span>
            <p>轻松选书</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tabsTitle">
      <div class="dot">
        <div class="op25">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op50">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op75">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op100">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
      </div>
      <div class="title">现在开通VIP 免费得</div>
      <div class="dot dot2">
        <div class="op25">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op50">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op75">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
        <div class="op100">
          <div v-for="(item, index) in 4" :key="index"></div>
        </div>
      </div>
    </div>
    <!-- 大咖课程 -->
    <div class="course">
      <div class="tip">VIP开通成功后，可在【我的】-【已购】中查看到账福利</div>
      <div class="two-title">
        <div class="line"></div>
        <span>大咖课程 专享体验</span>
      </div>
      <div class="detail">
        <img src="@/assets/images/VIP/图层7@2x.png" alt="" />
        <div class="content">
          <div class="c-title">活出漂亮人生-女性成长十节课</div>
          <div class="c-introduce">苏芒：女人不苦不累的聪明活法苏芒</div>
          <div class="end">
            <span class="price">价值 ¥19.9</span>
            <span>免费得 </span>
          </div>
        </div>
      </div>
      <div class="detail">
        <img src="@/assets/images/VIP/图层7@2x.png" alt="" />
        <div class="content">
          <div class="c-title">活出漂亮人生-女性成长十节课</div>
          <div class="c-introduce">苏芒：女人不苦不累的聪明活法苏芒</div>
          <div class="end">
            <span class="price">价值 ¥19.9</span>
            <span>免费得 </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
// tabs标题
.tabsTitle {
  width: 335.5px;
  height: 40px;
  background: linear-gradient(0deg, #ffe2b9 0%, #ffeacc 100%);
  border-radius: 9px 9px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  .dot2 {
    flex-direction: row-reverse;
  }
  .dot {
    display: flex;
    > div {
      margin-right: 1.5px;
      > div {
        width: 2px;
        margin-bottom: 1.5px;
        height: 2px;
        background: #d6a979;
        border-radius: 50%;
      }
    }
    .op25 {
      > div {
        opacity: 0.25;
      }
    }
    .op50 {
      > div {
        opacity: 0.5;
      }
    }
    .op75 {
      > div {
        opacity: 0.75;
      }
    }
    .op100 {
      > div {
        opacity: 1;
      }
    }
  }
  .title {
    margin: 0 17.5px;
    color: #a76628;
    font-size: 16px;
  }
}
.vip {
  font-family: PingFang SC;
  line-height: 23px;
  background: #fafafa url("../assets/images/我的/bg.png") repeat-x;
  font-weight: bold;
  padding: 19px;
  font-size: 12px;
  .bg {
    margin-bottom: 15px;
    .top {
      // padding: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 19px;
      margin-bottom: 40px;
      img {
        width: 10px;
        height: 19px;
      }
      span {
        font-size: 17px;
        color: #fff;
      }
    }
    .msg {
      padding: 20px;
      background: linear-gradient(-90deg, #fbe6c9 0%, #f7d5a4 100%);
      height: 150px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .me {
        display: flex;
        justify-content: start;
        align-items: center;
        height: 51px;
        .profile-photo {
          width: 51px;
          height: 51px;
          background: url("../assets/images/我的/xxxx-2@2x.png");
          background-size: 51px 51px;
        }
        .username {
          height: 51px;
          margin-left: 5px;
          display: flex;
          flex-direction: column;
          // align-items: center;
          // justify-content: center;
          p {
            margin-top: 2px;
            font-size: 12px;
            color: #a36021;
            img {
              width: 7px;
              height: 5px;
              margin-left: 3px;
            }
          }
          .name {
            font-size: 16px;
            color: #ae7034;
            margin-bottom: 5px;
            img {
              width: 19px;
              height: 19px;
            }
          }
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        .left > span:first-child {
          font-size: 15px;
          color: #c1650f;
        }
        .left > span:nth-child(2) {
          font-size: 27px;
          color: #c1650f;
        }
        .left > span:nth-child(3) {
          font-size: 10px;
          color: #a76628;
          margin-left: 5px;
        }
        .right {
          width: 96px;
          height: 36px;
          line-height: 36px;
          border-radius: 18px;
          box-shadow: 0px 3px 4px 0px rgba(129, 72, 21, 0.55);
          background: #d3751f;
          color: #fefefe;
          font-size: 16px;
          text-align: center;
        }
      }
    }
  }
  .equities {
    padding: 17px 23px;
    background-color: #fff;
    border-radius: 9px;
    margin-bottom: 30px;
    .list {
      .list-t {
        display: flex;
        align-items: center;
        height: 18px;
        margin-bottom: 15px;
        .circle {
          width: 8px;
          height: 8px;
          background: #77594f;
          border-radius: 50%;
        }
        .emphasize {
          font-size: 16px;
          color: #73554c;
          padding: 0 10px;
        }
        .line {
          width: 2px;
          height: 15px;
          background-color: #7f645c;
          margin-right: 5px;
        }
        span {
          font-size: 14px;
          color: #94807a;
        }
      }
      .list-c {
        display: flex;
        justify-content: space-around;
        padding-bottom: 10px;
        border-bottom: 1px solid #f2f2f2;
        margin-bottom: 10px;
        .list-c-c {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          img {
            width: 49px;
            height: 49px;
          }
          span {
            font-size: 11.5px;
            color: #4d4a4a;
          }
          p {
            font-size: 10px;
            color: #b6b6b6;
            margin: 0;
          }
        }
      }
    }
  }
  .course {
    background-color: #fff;
    .tip {
      margin: 5.5px 0;
      font-size: 10px;
      color: #939393;
      text-align: center;
    }
    .two-title {
      display: flex;
      align-items: center;
      height: 15px;
      .line {
        width: 3px;
        background-color: #a8672a;
        height: 15px;
        border-radius: 1.5px;
        margin-right: 11px;
      }
      span {
        font-size: 15px;
        color: #a8672a;
      }
    }
    .detail {
      margin: 15px 0;
      display: flex;
      img {
        width: 85px;
        height: 113px;
        margin-right: 15px;
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .c-title {
          font-size: 16px;
          color: #565352;
        }
        .c-introduce {
          font-size: 13px;
          color: #a2a2a2;
        }
        .end {
          display: flex;
          justify-content: space-between;
          span {
            font-size: 12px;
            color: #959595;
          }
          .price {
            font-size: 14px;
            color: #fa6200;
          }
        }
      }
    }
  }
}
</style>
